<template>
  <div>
    <h3>right组件</h3>
    <p>{{ age }}</p>
    <input ref="ipt" type="text" v-if="flag" @blur="flag = false">
    <button v-else @click="showIpt">按钮</button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      flag: true,
      age: 10
    }
  },
  methods: {
    showIpt () {
      this.age++
      this.age++
      this.age++
      this.age++
      this.age++
      this.age++
      this.age++
      this.flag = true // 修改数据，让输入框显示
      // 数据修改后，页面会自动更新，但不是马上更新。要等到下次循环的时候才会更新页面
      // 也就是说，如果数据修改后，你希望马上对其进行DOM操作，是找不到这个元素的
      // 如果需要立即操作这个DOM，可以把代码写到 $nextTick() 里面
      this.$nextTick(() => {
        this.$refs.ipt.focus() // 让输入框获取焦点
      })
    }
  }
}
</script>
